import { FC, useState } from 'react';
import { Card, Table, Space, Typography, Tag, Button, Popconfirm } from 'antd';

// 数据源
const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
  {
    key: '11',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '12',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
  {
    key: '21',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '22',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
  {
    key: '31',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '32',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
  {
    key: '41',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '42',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
  {
    key: '51',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
    likes: ['唱歌', '打牌'],
  },
  {
    key: '52',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
    likes: ['跳舞', '🏀'],
  },
];

// 列信息
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    // render函数用来渲染
    // render(text: string) {
    //   return text;
    // },
    render(text: string) {
      return <Typography.Link>{text}</Typography.Link>;
    },
  },
  {
    title: '年龄',
    dataIndex: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
  },
  {
    title: '爱好',
    dataIndex: 'likes',
    render(text: string[]) {
      return (
        <>
          {text.map((item, index) => (
            <Tag color="magenta" key={index}>
              {item}
            </Tag>
          ))}
        </>
      );
    },
  },
  {
    title: '操作',
    // record表示这一条数据
    render(text: any, record: any) {
      return (
        <>
          <Popconfirm
            title="Are you sure to delete this task?"
            onConfirm={confirm(record)}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </>
      );
    },
  },
];

const confirm = (record: any) => () => {
  console.log('ok');
  console.log(record);
};
const cancel = () => {
  console.log('cancel');
};

const Index: FC = () => {
  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card title="表格基础">
        <Table dataSource={dataSource} columns={columns} />
      </Card>
    </Space>
  );
};

export default Index;
